<template>
  <div class="service-contact-table-container" v-loading="loading">
    <el-table
      stripe
      border
      :data="serviceList"
      :highlight-current-row="false"
      header-row-class-name="service-contact-table-header"
      row-class-name="service-contact-table-row"
      class="service-contact-table"
    >
      <el-table-column
        v-for="(column, index) in columns"
        v-if="column.show"
        :key="`${column.field}_${index}`"
        :label="column.displayName"
        :prop="column.fieldName"
        :width="column.width"
        min-width="150px"
        :sortable="column.sortable"
        show-overflow-tooltip
        :align="column.align"
      >
        <template slot-scope="scope">
          <!--所属服务商 -->
          <template v-if="column.fieldName === 'provider'">
            <div class="link">
              {{ scope.row.provider && scope.row.provider.name || '' }}
            </div>
          </template>
          <!--授权工单类型 -->
          <template v-else-if="column.fieldName === 'authorizeTask'">
            <div v-if="scope.row.authorizeTask && scope.row.authorizeTask.length">
              {{scope.row.authorizeTask.map(item => item && item.name).join('；') }}
            </div>
          </template>
          <!--授权产品目录 -->
          <template v-else-if="column.fieldName === 'authorizeProduct'">
            <div v-if="scope.row.authorizeProduct && scope.row.authorizeProduct.length">
              {{scope.row.authorizeProduct.map(item => item && item.name).join('；') }}
            </div>
          </template>
          <!--授权区域 -->
          <template v-else-if="column.fieldName === 'authorizeAddress'">
            <div v-if="scope.row.authorizeAddress && scope.row.authorizeAddress.length">
              {{ scope.row.authorizeAddress.map(item => item && item.all).join('；') }}
            </div>
          </template>
          <!--授权有效期 -->
          <template v-else-if="column.fieldName === 'validTime'">
            <div v-if="scope.row.validTime">
              {{ scope.row.validTime && formatDate(safeNewDate(scope.row.validTime.validTime), 'YYYY-MM-DD') }}
              {{ scope.row.validTime && formatDate(safeNewDate(scope.row.validTime.inalidTime), 'YYYY-MM-DD') }}
            </div>
          </template>
          <!--工程师资质 -->
          <template v-else-if="column.fieldName === 'engineerQuality'">
            <div>
              {{ scope.row.engineerQuality && scope.row.engineerQuality.join('、') }}
            </div>
          </template>
          <!--角色 -->
          <template v-else-if="column.fieldName === 'role'">
            <div v-if="scope.row.role">
              {{ scope.row.role.name }}
            </div>
          </template>
          <!--状态 -->
          <template v-else-if="column.fieldName === 'status'">
            <div>
              {{ status.filter(item => item && item.value === scope.row.status)[0].text }}
            </div>
          </template>
          <!--上岗日期 -->
          <template v-else-if="column.fieldName === 'engineerDate'">
            <div>
              {{ scope.row[column.fieldName] && formatDate(safeNewDate(scope.row[column.fieldName]), 'YYYY-MM-DD') }}
            </div>
          </template>
          <!--创建时间 -->
          <template v-else-if="['updateTime', 'createTime'].includes(column.fieldName)">
            <div>
              {{ scope.row[column.fieldName] && formatDate(safeNewDate(scope.row[column.fieldName]), 'YYYY-MM-DD HH:mm:ss') }}
            </div>
          </template>
          <!--联系地址 -->
          <template v-else-if="column.fieldName === 'engineerAddress'">
            <div v-if="scope.row.engineerAddress">
              {{ scope.row.engineerAddress.all }}
            </div>
          </template>
          <!--创建人&更新人 -->
          <template v-else-if="['createUser', 'updateUser'].includes(column.fieldName)">
            <div v-if="scope.row[column.fieldName]">
              {{ scope.row[column.fieldName].displayName }}
            </div>
          </template>
          <template v-else>
            {{
              $formatFormField(column, scope.row, 'formVOList')
            }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="service-table-footer">
      <p class="total-count">
        <i18n path="common.base.table.totalCount" tag="span">
          <span place="count">{{ paginationInfo.totalItems }}</span>
        </i18n>
      </p>
      <el-pagination
        class="service-contact-table-pagination"
        v-if="paginationInfo.totalItems"
        background
        @current-change="jump"
        :page-size="paginationInfo.pageSize"
        :current-page="paginationInfo.pageNum"
        layout="prev, pager, next"
        :total="paginationInfo.totalItems"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
/* api */
import * as ServiceProviderApi from '@src/api/serviceProviderApi';
/* util */
import { formatDate } from 'pub-bbx-utils';
import { safeNewDate } from '@src/util/time';
import { getRootWindowInitData } from '@src/util/window'
export default {
  name: 'engineer-table',
  props: {
    serviceProviderId: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    code: {
      type: String,
      default: ''
    }
  },
  computed: {
    isProviderUser() {
      return getRootWindowInitData().isProviderUser || false
    },
  },
  data() {
    return {
      serviceList: [],
      columns: [],
      paginationInfo: {
        pageSize: 10,
        pageNum: 1,
        totalItems: 0
      },
      loading: false,
      status:[],
      formatDate,
      safeNewDate,
    }
  },
  mounted() {
    this.getInitInfo();
    this.fetchData();
  },
  methods: {
    getAuthorizeProduct(list) {
      if(list && list.length) {
        let test = list.map(item => item.name).join('；')
        return test;
      }

    },
    /* 获取表头信息*/
    async getInitInfo() {
      try {
        let res = await ServiceProviderApi.getServiceEngineerInit({isProviderUser: this.isProviderUser});
        if(res.success && res.code === 0) {
          this.columns = res?.result?.allField?.filter(item => !['separator', 'attachment', 'info', 'autograph'].includes(item.formType) && item.isHidden != 1)?.map(item => {
            item.show = true;
            return item;
          }) ?? [];
          // 状态
          let fieldStatus = this.columns.filter(item => item.fieldName === 'status');
          if(fieldStatus && fieldStatus.length) {
            this.status = fieldStatus[0]?.setting?.dataSource || [];
          }
        } else {
          this.$message.error(res.message || this.$t('serviceProvider.engineerListInitError'));
        }
      } catch (e) {
        console.error(e);
      }
    },
    jump(pN) {
      this.paginationInfo.pageNum = pN;
      this.fetchData();
    },
    async fetchData() {
      let data = {
        pageNum: this.paginationInfo.pageNum,
        pageSize: this.paginationInfo.pageSize,
        tenantProviderId: this.serviceProviderId,
        name: this.name,
        code: this.code,
      }
      try {
        this.loading = true;
        let res = await ServiceProviderApi.getEngineerPageList(data)
        if(res.success && res.code === 0) {
          this.serviceList = res?.result?.engineerList?.list || [];
          this.paginationInfo.totalItems = res?.result?.engineerList?.total;
        }else {
          this.$message.error(res.message)
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.service-contact-table-container {
  padding: 16px;
  .service-contact-table {
    border: 1px solid #ebeef5;
    height: 100%;
  }
  .service-contact-table-header th {
    background: #f5f5f5;
    color: $text-color-primary;
  }
  .service-contact-table-pagination {
    text-align: right;
    margin-top: 7px;
  }

  .service-table-footer {
    display: flex;
    justify-content: space-between;

    .total-count {
      padding: 0 10px;
      font-size: 12px;
      margin: 0;
      line-height: 46px;
      span {
        padding: 0 5px;
        @include fontColor();
      }
    }
  }
}
::v-deep .el-table__empty-block {
	width: 100% !important;
  position: sticky;
  left: 0;
  top: 0;
}
</style>